{% extends 'base.html' %}
{% block title %}{{ _('玉器官网 · 首页') }}{% endblock %}

{% block content %}

{# ===== Hero 区：渐变+半玻璃卡片，使用第一张 banner 做展示 ===== #}
<section class="relative overflow-hidden">
  <div class="brand-gradient absolute inset-0 opacity-20"></div>
  <div class="absolute inset-0" aria-hidden="true">
    {% if banners and banners[0] %}
      <img src="{{ banners[0].image_path|to_static }}" alt="" class="w-full h-full object-cover object-center opacity-20">
    {% endif %}
  </div>

  <div class="relative max-w-7xl mx-auto px-4 py-14 md:py-24">
    <div class="glass rounded-2xl p-8 md:p-12 shadow-xl">
      <div class="grid md:grid-cols-2 gap-10 items-center">
        <div>
          <h1 class="text-3xl md:text-5xl font-semibold tracking-tight">
            {{ _('臻品玉器 · 匠心甄选') }}
          </h1>
          <p class="mt-4 text-slate-600 leading-relaxed">
            {{ _('选材上乘、纹理温润。支持国际化展示与多渠道咨询购买，全球寄送。') }}
          </p>
          <div class="mt-8 flex gap-3">
            <a href="#featured" class="px-5 py-3 rounded-xl bg-emerald-600 text-white hover:bg-emerald-700 focus-soft">
              {{ _('立即选购') }}
            </a>
            <a href="/contact_us" class="px-5 py-3 rounded-xl border border-slate-300 hover:bg-white focus-soft">
              {{ _('联系我们') }}
            </a>
          </div>
        </div>
        <div class="hidden md:block">
          {% if banners|length > 1 %}
            <div class="grid grid-cols-2 gap-4">
              {% for b in banners[0:4] %}
              <a href="{{ b.link_url or '#' }}" class="block rounded-xl overflow-hidden bg-white/70 border border-white/60">
                <img class="w-full h-36 object-cover" src="{{ b.image_path|to_static }}" alt="{{ b.title }}">
              </a>
              {% endfor %}
            </div>
          {% endif %}
        </div>
      </div>
    </div>

    {# 类目快速入口 #}
    <div class="mt-8 flex flex-wrap gap-2">
      {% for (c, cat_name), ps in cat_products %}
      <a href="/c/{{ c.slug }}" class="px-3 py-2 text-sm rounded-full border border-slate-300/70 hover:border-emerald-500 hover:text-emerald-700 focus-soft">
        {{ cat_name }}
      </a>
      {% endfor %}
    </div>
  </div>
</section>

{# ===== 信任背书（可选：工厂/证书/全球发货等） ===== #}
<section class="border-y bg-white/60">
  <div class="max-w-7xl mx-auto px-4 py-6 flex flex-wrap items-center justify-between gap-3 text-slate-500">
    <div class="flex items-center gap-2">
      <span class="i-lucide-shield-check"></span>
      <span>{{ _('支持鉴定证书') }}</span>
    </div>
    <div class="flex items-center gap-2">
      <span class="i-lucide-package-check"></span>
      <span>{{ _('全球安全包装与寄送') }}</span>
    </div>
    <div class="flex items-center gap-2">
      <span class="i-lucide-sparkles"></span>
      <span>{{ _('精选材质与工艺') }}</span>
    </div>
    <div class="flex items-center gap-2">
      <span class="i-lucide-messages-square"></span>
      <span>{{ _('7×24 小时咨询') }}</span>
    </div>
  </div>
</section>

{# ===== 推荐区（精选） ===== #}
<section id="featured" class="max-w-7xl mx-auto px-4 py-12">
  <div class="flex items-baseline justify-between">
    <h2 class="text-xl md:text-2xl font-semibold">{{ _('精选推荐') }}</h2>
    <a href="/c/{{ (cat_products|list)[0][0][0].slug if cat_products else '' }}" class="text-emerald-700 text-sm">
      {{ _('查看更多 →') }}
    </a>
  </div>

  <div class="mt-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
    {# 从每个类目取 1-2 个拼一组 #}
    {% set shown = 0 %}
    {% for (c,cat_name), ps in cat_products %}
      {% for p in ps[0:2] %}
        {% if shown < 8 %}
          {% set shown = shown + 1 %}
          <a href="/p/{{ p.id }}" class="block rounded-2xl overflow-hidden bg-white border border-slate-200/70 card">
            <div class="relative">
              <img class="w-full h-56 object-cover" src="{{ p.cover_image|to_static }}" alt="{{ p.t('title', (g.get('current_lang') or 'zh')) }}">
              <div class="absolute inset-x-0 bottom-0 p-3 bg-gradient-to-t from-black/60 to-transparent text-white text-xs">
                {{ cat_name }}
              </div>
            </div>
            <div class="p-4">
              <div class="text-sm line-clamp-1">{{ p.t('title', (get_locale()|string)) }}</div>
              {% if p.price %}
              <div class="mt-1 text-emerald-700 font-medium">
                {{ p.price|fmt_price(p.currency) }}
              </div>
              {% endif %}
            </div>
          </a>
        {% endif %}
      {% endfor %}
    {% endfor %}
  </div>
</section>

{# ===== 按类目区块展示（更“画廊化”） ===== #}
{% for (c,cat_name), ps in cat_products %}
<section class="max-w-7xl mx-auto px-4 py-12">
  <div class="flex items-baseline justify-between">
    <h2 class="text-xl md:text-2xl font-semibold">{{ cat_name }}</h2>
    <a class="text-emerald-700 text-sm" href="/c/{{ c.slug }}">{{ _('查看更多 →') }}</a>
  </div>

  <div class="mt-6 grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-5">
    {% for p in ps[0:5] %}
    <a href="/p/{{ p.id }}" class="group block rounded-2xl overflow-hidden bg-white border border-slate-200/70 card">
      <div class="relative">
        <img class="w-full h-56 object-cover" src="{{ p.cover_image|to_static }}" alt="{{ p.t('title', (g.get('current_lang') or 'zh')) }}">
        <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition bg-black/5"></div>
      </div>
      <div class="p-4">
        <div class="text-sm line-clamp-1">{{ p.t('title', (get_locale()|string)) }}</div>
        {% if p.price %}
        <div class="mt-1 text-emerald-700 text-sm">{{ p.price|fmt_price(p.currency) }}</div>
        {% endif %}
      </div>
    </a>
    {% endfor %}
  </div>
</section>
{% endfor %}

{# ===== 底部 CTA ===== #}
<section class="relative">
  <div class="brand-gradient absolute inset-0 opacity-10"></div>
  <div class="relative max-w-7xl mx-auto px-4 py-12 md:py-16 text-center">
    <h3 class="text-2xl font-semibold">{{ _('需要更多款式或定制？') }}</h3>
    <p class="mt-2 text-slate-600">{{ _('联系我们获取一对一选品建议与证书说明。') }}</p>
    <div class="mt-6">
      <a href="/contact_us" class="inline-flex px-6 py-3 rounded-xl bg-emerald-600 text-white hover:bg-emerald-700 focus-soft">
        {{ _('立即联系') }}
      </a>
    </div>
  </div>
</section>

{% endblock %}
